<template>
  <div class="player-container">
    <div @mouseover="mouseOver"
      @mouseleave="mouseLeave" v-loading="loading" :element-loading-text="LoadingText" element-loading-background="rgba(122, 122, 122, 0.8)"
      :id="Id" class="glplayer">
      <div class="glplayer_footer" v-if="show">
        <div class="glplayer_footer-left">
          <div @click="resumeHandler"
            :class="[playShow ? 'glplayer_footer-play' : 'glplayer_footer-stop', 'glplayer_footer-item']"></div>
        </div>
        <div class="glplayer_footer-slider">
          <el-slider :show-tooltip="false" v-model="value1" size="small" @input="sliderChange" />
        </div>
        <div class="glplayer_footer-right">
          <div ref="timelineRef" class="timelineRef">00:00:00/00:00:00</div>
          <el-popover trigger="click" placement="top" width="40" popper-class="glplayer_footer-dropdown">
            <template #reference>
              <div class="glplayer_footer-volume"></div>
            </template>
            <!-- <div>222222</div> -->
            <el-slider @input="sliderVoiceChange" class="footer-popover-slider" size="small" v-model="value" vertical
              height="100px" />
          </el-popover>
          <div @click="fullScreenHandler"
            :class="[showFullScreen ? 'glplayer_footer-onFullScreen' : 'glplayer_footer-offFullScreen', 'right-FullScreen']">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

/**
 * vue/next is same as vue2, so we should init  project
 * in mounted lifecycle.
 */
import {
  createPlayerServer,
  destoryPlayerServer
} from '../services/player.js'
export default {
  props: {
    URL: { type: String, default: "4.mp4" },
    width: { type: Number, default: 560 },
    height: { type: Number, default: 340 },
    Id: {type: String, default: 'test1'}
  },
  data() {
    return {
      value: 0,
      loading: false,
      LoadingText: '加载进度0%...',
      showFullScreen: true,
      playerObject: undefined,
      playShow: true,
      H265JS_DEFAULT_PLAYER_CONFIG: {
        player: this.Id,//'glplayer'
        width: this.width,
        height: this.height,
        token:
          'base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1',
        extInfo: {
          moovStartFlag: true,
        },
      },
      url: '4.mp4',
      mediaInfo: null,
      value1: 0,
      show: true
    }
  },
  mounted() {
    // let uuu = this.url
    // let uuu='http://172.16.8.197:8080/live1/test/hls.m3u8'
     console.log("创建播放器",this.URL);
    this.playerObject = createPlayerServer(this.URL, this.H265JS_DEFAULT_PLAYER_CONFIG)
     console.log("播放器",this.playerObject);
    let timelineRef = this.$refs.timelineRef
    this.executePlayerServer(this.playerObject, timelineRef)
    // this.value1 = executePlayerServerSlider()
    // setTimeout(() => {
    //   console.log(123);
    //   this.resumeHandler();
    // }, 2000);
  },
  created() {
  },
  methods: {
    // 调节音量
    sliderVoiceChange(val) {
      this.playerObject.setVoice(val / 100);
    },
    durationFormmat(val) {
      val = val.toString()
      if (val.length < 2) return '0' + val
      return val
    },
    setDurationText(duration) {
      if (duration < 0) return 'Player'
      const randDuration = Math.round(duration)
      return (
        this.durationFormmat(Math.floor(randDuration / 3600)) +
        ':' +
        this.durationFormmat(Math.floor((randDuration % 3600) / 60)) +
        ':' +
        this.durationFormmat(Math.floor(randDuration % 60))
      )
    },
    executePlayerServer(player, timelineEl) {
      // todo....
      player.onLoadFinish = () => {
        this.mediaInfo = player.mediaInfo()
        if (this.mediaInfo.videoType === 'vod') {
          this.value1 = 0
          timelineEl.textContent =
            this.setDurationText(0) +
            '/' +
            this.setDurationText(this.mediaInfo.meta.durationMs / 1000);

        }
      }
      player.onPlayTime = (pts) => {
        if (this.mediaInfo.videoType === 'vod') {
          // store.commit("SET_isliderValue", Math.floor((pts / (mediaInfo.meta.durationMs / 1000)) * 100))
          this.value1 = Math.floor((pts / (this.mediaInfo.meta.durationMs / 1000)) * 100)
          timelineEl.textContent =
            this.setDurationText(pts) +
            '/' +
            this.setDurationText(this.mediaInfo.meta.durationMs / 1000)
        }
      }
      player.do()
    },
    sliderChange(val) {
      console.log(val);
      console.log(this.value1);
      // this.loading = true;
      // this.LoadingText = `加载进度中...`
      // if (this.playerObject.isPlaying()) {
      //   // 正在播放中
      //   this.playerObject.pause()
      // };
      let SeekNmuber = Math.round(this.mediaInfo.meta.durationMs / 1000 / 100 * val)
      console.log(SeekNmuber)
      this.playerObject.seek(SeekNmuber);
      // this.playerObject.onCacheProcess = (cPts) => {
      //   console.log("onCacheProcess => ", cPts);
      // };
      this.playerObject.onSeekFinish = () => {
        // todo
        console.log('加载完成')
        // this.loading = false;
        // console.log(this)
        // this.playerObject.play();
      };
    },
    fullScreenHandler() {
      if (this.showFullScreen) {
        this.playerObject.fullScreen();
        this.showFullScreen = false
      } else {
        this.playerObject.closeFullScreen();
        this.showFullScreen = true
      }
    },
    resumeHandler() {
      // this.playerObject.play()
      if (this.playShow) {
        this.playerObject.play();
        this.playShow = false
      } else {
        this.playerObject.pause();
        this.playShow = true
      }
      this.playerObject.onPlayFinish = () => {
        console.log('结束');
        this.playShow = true;
      };
    },
    pauseHandler() {
      alter('销毁')
       console.log('销毁');
      this.playerObject.pause()
      destoryPlayerServer(this.playerObject)
    },
    // 移入
    mouseOver() {
      this.show = true;
    },
    // 移出
    mouseLeave() {
      setTimeout(() => {
        this.show = false;
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.header-line {
  height: 30px;
}

.glplayer {
  position: relative;

  .glplayer_footer {
    position: absolute;
    bottom: 0;
    background-color: black;
    opacity: 0.8;
    // height: 30px;
    padding: 5px 20px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 999;

    .glplayer_footer-left {
      .glplayer_footer-item {
        width: 25px;
        height: 25px;
        background-size: 100%;
        margin-right: 20px;
      }

      .glplayer_footer-play {
        background-image: url('/public/img/play.png');
        // margin: 5px;
      }

      .glplayer_footer-stop {
        background-image: url('/public/img/stop.png');
        // margin: 5px;
      }
    }

    .glplayer_footer-slider {
      width: 600px;
      margin: 0 20px;

      // height: 8px;
      ::v-deep .el-slider__button {
        width: 10px;
        height: 10px;
      }

    }

    .glplayer_footer-right {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .glplayer_footer-volume {
        width: 25px;
        height: 25px;
        background-size: 100%;
        background-image: url('/public/img/volume.png');
        margin: 0 20px;
      }

      .timelineRef {
        color: #fff;
        line-height: 25px;
        margin: 0 20px;
      }

      .right-FullScreen {
        width: 25px;
        height: 25px;
        background-size: 100%;
      }

      .glplayer_footer-onFullScreen {
        background-image: url('/public/img/onFullScreen.png');
      }

      .glplayer_footer-offFullScreen {
        background-image: url('/public/img/offFullScreen.png');
      }
    }
  }

}

.player-container {
  width: 560px;
  min-height: 340px;
  position: relative;
}

.player__button {
  border: 1px solid black;
  width: 80px;
  border-radius: 5px;
  text-align: center;
  margin: 10px 0;
  cursor: pointer;
}

.timeline__container {
  margin: 5px 0;
}

.timeline__container span:nth-child(2) {
  margin-left: 10px;
}
</style>
<style lang="scss">
.glplayer_footer-dropdown {
  background-color: rgba(231, 231, 228, 0.5) !important;
  border: none !important;
  min-width: 30px !important;
  padding: 4px !important;

  .el-popper__arrow::before {
    // background: rgba(231, 231, 228, 0.5) !important;
    width: 0px;
    height: 0px;
  }

  .footer-popover-slider {
    margin: 8px 0px;

    .el-slider__button {
      width: 10px;
      height: 10px;
    }

  }
}
</style>